<template>
  <div class="user">
    <div class="user-top">每一次相遇，都是一份幸运</div>
    <div class="user-down">
      <div class="user-down-colorbox">
        <div class="user-down-title">选择主题</div>
        <div class="user-down-color">
          <div
            class="user-down-color-item"
            v-for="(item, index) in colorList"
            :key="index"
            @click="setSystemColor(index)"
          >
            <div
              class="user-down-color-item-color"
              :style="[{ backgroundColor: item.color }]"
            >
              <div
                class="user-down-color-item-color-checked"
                v-if="item.isChecked"
              ></div>
            </div>
            <div class="user-down-color-item-title">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <div class="user-down-version">当前版本: {{ version }}</div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from "vue";
import storeage, { EStorage } from "@/core/storage";

export interface IColorList {
  color: string;
  title: string;
  isChecked?: boolean;
  code: string;
}

export default defineComponent({
  name: "user",
  setup() {
    const colorList = ref<Array<IColorList>>([
      { color: "#61CED7", title: "天空蓝", code: "blue", isChecked: true },
      { color: "#FF66CC", title: "少女粉", code: "pink", isChecked: false },
      { color: "#CC33FF", title: "基佬紫", code: "purple", isChecked: false },
      { color: "#F04A00", title: "柠檬黄", code: "yellow", isChecked: false },
    ]);
    const version = ref<string>('非正式版本')
    /** 设置系统颜色 */
    const setSystemColor = (index: number) => {
      if (index === colorList.value.findIndex((item) => item.isChecked)) return;
      colorList.value = colorList.value.map(
        (colorItem: IColorList, num: number) => {
          return {
            ...colorItem,
            isChecked: index === num,
          };
        }
      );
      /** 更新缓存里的颜色属性以及document.documentElement上的system-color属性 */
      const { code } = colorList.value[index];
      storeage.set(EStorage.primaryColor, code);
      document.documentElement.setAttribute("system-color", code);
    };
    /** 初始化colorlist */
    const initColorList = () => {
      const systemColor = storeage.get(EStorage.primaryColor) || "blue";
      const index = colorList.value.findIndex(
        (item) => item.code === systemColor
      );
      setSystemColor(index);
    };
    /** 初始化版本 */
    const initEnvVesrion = () => {
      const {VUE_APP_ENV} = process.env;
      // eslint-disable-next-line @typescript-eslint/no-var-requires
      const versionData = require('@/assets/version.json');
      const envVersion = versionData ||{};
      const versionVal = envVersion[VUE_APP_ENV+'Version'];
      if(versionVal){
         version.value = versionVal
      }
    }
    initColorList();
    initEnvVesrion();
    return {
      colorList,
      setSystemColor,
      initColorList,
      version
    };
  },
});
</script>

<style lang='scss' scoped>
.user {
  width: 100%;
  height: 100%;
  .user-top {
    @include systemBackColor();
    height: 80px;
    text-align: center;
    line-height: 80px;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 600;
    font-style: italic;
  }
  .user-down {
    height: calc(100% - 80px);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    & > div {
      width: 100%;
    }
    .user-down-colorbox {
      .user-down-title {
        margin-bottom: 10px;
        color: #707070;
      }
      .user-down-color {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        .user-down-color-item {
          width: 115px;
          margin-right: 10px;
          margin-bottom: 10px;
          &:nth-child(2n) {
            margin-right: 0;
          }
          .user-down-color-item-color {
            height: 60px;
            border-radius: 10px;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            .user-down-color-item-color-checked {
              width: 20px;
              height: 20px;
              margin: 0 3px 3px 0;
              background-image: url("../images/checked.svg");
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }
          }
          .user-down-color-item-title {
            padding: 5px;
            text-align: center;
            font-size: 12px;
            letter-spacing: 1px;
            color: #707070;
            font-weight: 600;
          }
        }
      }
    }
    .user-down-version {
      margin-bottom: 10px;
      color: #cecece;
      font-size: 12px;
      text-align: center;
    }
  }
}
</style>